  <!-- dialogs first is important for ~ selector -->
  <div class="effeckt-wrap effeckt-modal-wrap" id="effeckt-modal-wrap"> <!-- for centering transform -->
    <div class="effeckt-content effeckt-modal" id="effeckt-modal">
      <h3>Modal Dialog</h3>
      <div class="effeckt-modal-content">
        <p>This is a modal window.</p>
        <button class="effeckt-modal-close">Close me!</button>
      </div>
    </div>
  </div>
  <!-- overlay coming after is important for ~ selector -->
  <!-- this is going to be used if there is not javascript involved -->
  <!-- <div class="effeckt-overlay effeckt-modal-overlay" id="effeckt-modal-overlay"></div> -->
